<template>
            <div class="search-form isheader" >
                <div>
                    <a-form size="small" :model="searchData" layout="inline" style="margin-left: 10px;">
                        <a-form-item label="车牌号" >
                            <a-select popup-container="html"  class="bacClass" :style="{ width: '10rem' }" placeholder="" v-model="searchData.vehicleNo"  allow-clear>
                                <a-option v-for="item in vehicleList" :value="item.licensePlateName">
                                {{ item.licensePlateName }}
                                </a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="送货人" >
                            <a-input allow-clear :style="{ width: '160px' }" class="bacClass" v-model="searchData.deliveryMan
                            " />
                        </a-form-item>
                        <a-form-item label="出车时间">
                            <a-range-picker  popup-container="html"   show-time format="YYYY-MM-DD HH:mm:ss" class="bacClass"
                            @change="pickerChange" style="width: 254px;" v-model="searchData.outTime" />
                        </a-form-item>
                    </a-form>
                </div>
                <div>
                    <Toolbar :items="['查询','新增','删除']" @select="loadVehicleRecords"
                    @del="delVehicleRecord" @add="vehFormData.showForm = true"></Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>

            <div :style="{ height: '86.8%', padding: '10px' }">
            <a-tabs   :lazy-load="true" type="card" :justify="true" :default-active-key="tabsKeys">
                <a-tab-pane title="车辆运输记录" :key="1">
                      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" @grid-ready="gridReady" style="height:90%" :defaultColDef="defaultColDef"
                        class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="vehicleColDefs" :localeText="localeText1"></AgGridVuesCopys>
                    <paginationCopys :page-size-options="pagingList1" :total="searchData.total" show-total show-jumper @change="pageChange"
                        style="justify-content: center" :page-size="10" :current="searchData.current" />
                </a-tab-pane>
            </a-tabs>
             </div>

        <a-modal v-model:visible="vehFormData.showForm" :width="400"  @ok="saveVehicleRecord">
          <template #title> 车辆运输记录新增 </template>
          <a-form ref="formRef" :model="vehFormData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
              <a-form-item label="车牌号" field="vehicleNo" label-col-flex="80px" :rules="[{ required: true, message: '车牌号必选' }]">
                  <a-select popup-container="html"  class="bacClass" :style="{ width: '220px' }" placeholder="" v-model="vehFormData.vehicleNo"  allow-clear>
                      <a-option v-for="item in vehicleList" :value="item.licensePlateName">
                          {{ item.licensePlateName }}
                      </a-option>
                  </a-select>
              </a-form-item>
              <a-form-item label="送货人" field="deliveryMan" label-col-flex="80px" :rules="[{ required: true, message: '送货人必填' }]">
                  <a-input allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.deliveryMan" />
              </a-form-item>
              <a-form-item label="线路名称" field="routeName" label-col-flex="80px" :rules="[{ required: true, message: '线路名称必填' }]">
                  <a-input allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.routeName" />
              </a-form-item>
              <a-form-item label="出车条数" field="startCount" label-col-flex="80px" :rules="[{ required: true, message: '出车条数必填' }]">
                  <a-input-number allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.startCount" />
              </a-form-item>
              <a-form-item label="回车条数" field="backCount" label-col-flex="80px" :rules="[{ required: true, message: '回车条数必填' }]">
                  <a-input-number allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.backCount" />
              </a-form-item>
              <a-form-item label="出车时间" field="startTime" label-col-flex="80px" :rules="[{ required: true, message: '出车时间必填' }]">
                    <a-date-picker  popup-container="html"  style="width: 220px;" show-time
                      format="YYYY-MM-DD HH:mm:ss" v-model="vehFormData.startTime" />
              </a-form-item>
              <a-form-item label="回车时间" label-col-flex="80px">
                    <a-date-picker  popup-container="html"  style="width: 220px;" show-time
                      format="YYYY-MM-DD HH:mm:ss" v-model="vehFormData.backTime" />
              </a-form-item>
          </a-form>
        </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import { FormInstance } from "@arco-design/web-vue/es/form";
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { pagingList } from '@/api/paging'
        const headerShow = ref(true)
        const localeText1: any = ref(localeText)
        const tableDataList = ref([])
        const pagingList1: any = ref(pagingList)



        const pageData = reactive({
            showAdd: false,
            showDetails: false,
            isShow: false,
            rHeight: 0,
        })


        const searchData = reactive({
            vehicleNo: null,
            deliveryMan: null,
            outTime: null,
            beginTime: null,
            endTime: null,
            total: 10,
            current:1,
            size: 10
        })

        const vehFormData = reactive({
            showForm: false,
            routeId: null,
            routeName: null,
            vehicleNo: null,
            deliveryMan: null,
            startCount: null,
            backCount: null,
            startTime: null,
            backTime: null
        })


        const vehicleList = ref([{
            id: null,
            licensePlateName: ''
        }])


        const pickerChange = (dateString,value) => {
            if(dateString){
                searchData.beginTime = dateString[0];
                searchData.endTime = dateString[1];
            }else{
                searchData.beginTime = '';
                searchData.endTime = '';
            }
        }


        const loadVehicleNoList = () => {
            post({
                url: 'dwWms/dwLicensePlate/listAll',
                data: {}
            }).then(({code, data}) => {
                if (code === 200) {
                    vehicleList.value = data
                }
            })
        }

        onMounted(() => {
            post({
                url: 'dwWms/dwDyeProductInstock/fetchUserInfoByToken',
                data: {}
            }).then(({ code, message, data }) => {
                if (code === 200) {
                    //formData.companyId = data.firmId;
                    searchData.companyId = data.firmId;
                    loadVehicleNoList();
                    loadVehicleRecords();
                } else {
                    Message.error({
                        content: message,
                        duration: 5000,
                    });
                }
            })
        });




        const gridOptions = ref()
        const gridReady = (params: any) => {
            gridOptions.value = params.api;
        }

        const loadVehicleRecords = () => {
            post({
                url: 'dwWms/dwVehicleRecord/findPagedVehicleRecords',
                data: searchData
            }).then(({ code, data }) => {
                if (code === 200) {
                   gridOptions.value.setRowData(data.records);
                   searchData.total = data.total;
                }
            })
        }



        const formRef = ref<FormInstance>();
        const saveVehicleRecord = () => {
            formRef.value?.validate().then((err) => {
                console.log(err);
                if (!err){
                    post({
                        url: 'dwWms/dwVehicleRecord/insertVehicleRecord',
                        data: vehFormData
                    }).then(({ code, data }) => {
                        if (code === 200) {
                            Message.success({
                                content: "删除成功",
                                duration: 5000,
                            });
                            loadVehicleRecords();
                        }
                    })
                }else{
                    vehFormData.showForm = true;
                }
            });

        }




        const delVehicleRecord = () => {
            let rowIds = gridOptions.value.getSelectedRows().map((item) => item.id)
            if (rowIds.length === 0) {
                Message.warning("请选择要删除的数据！");
                return;
            }
            Modal.confirm({
                title: "系统提示",
                content: "确认删除此数据?",
                onOk() {
                post({
                    url: 'dwWms/dwVehicleRecord/delVehicleRecords',
                    data: rowIds
                }).then(({ code, data }) => {
                    if (code === 200) {
                        Message.success({
                            content: "删除成功",
                            duration: 5000,
                        });
                        loadVehicleRecords();
                    }
                })
                }
            });

        }


        const pageChange = (val: any) => {
            searchData.current = val;
            loadVehicleRecords();
        }



       const defaultColDef = {
           sortable: true,
           resizable: true,
           filter: true,
       }


       const vehicleColDefs = [
           {
               showRowGroup: 'hide_def',
               "headerName": "",
               "checkboxSelection": true,
               "pinned": "left",
               "width": 50,
               minWidth: 50,
               maxWidth: 50,
               lockPosition: "left",
           },
           {
               headerName: '记录单号',
               field: 'recordNo',
               width: 150
           },
           {
               headerName: '送货车号',
               field: 'vehicleNo',
               width: 150
           },
           {
               headerName: '送货人',
               field: 'deliveryMan',
               width: 150
           },
           {
               headerName: '路线名称',
               field: 'routeName',
               width: 150
           },
           {
               headerName: '出车条数',
               field: 'startCount',
               width: 150
           },
           {
               headerName: '回车条数',
               field: 'backCount',
               width: 150
           },
           {
               headerName: '出车时间',
               field: 'startTime',
               width: 150
           },
           {
               headerName: '回车时间',
               field: 'backTime',
               width: 150
           }
       ]





</script>
<script lang="ts">
export default {
    name: "VehicleRecords",
}
</script>

<style scoped>
.arco-select-dropdown {
    width: 150px ;
}
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>



